<template>
  <div>
    <div class="express">
      <p class="merchat">寄回商家地址</p>
      <div class="line"></div>
      <p class="company">{{tocompany}}</p>
      <span class="phone">{{tophone}}</span>
      <p class="site">{{toadress}}</p>
      <div class="fillbtn">
        <span class="name">快递公司</span>
        <input type="text" class="nameinp" placeholder="请填写快递公司名称" v-model="express_company">
      </div>
      <div class="fillbtn">
        <span class="oddnum">快递单号</span>
        <input type="text" class="num" placeholder="请填写快递单号" v-model="express_number">
      </div>
    </div>

    <div class="affirm">
      <p class="affirmP">请确认您的收货地址</p>

      <div class="infofill">
        <span class="nameinfo">姓名</span>
        <input type="text" class="sureinfo" placeholder="请输入正确的姓名" v-model="name">
      </div>

      <div class="infofill">
        <span class="moblie">手机</span>
        <input type="number" class="moblienum" placeholder="请输入正确的手机号" v-model="phone" oninput="if(value.length>11)value=value.slice(0,11)">
      </div>

      <!-- <div class="infofill" style="position:relative;">
        <span class="site place">地址</span>
        <b class="dizhi">
          <demo @getaddress="getAddress"></demo>
        </b>
        <input type="text" v-model="address" class="inp" placeholder="请选择">
        <img src="../../assets/images/right_small.png" alt="" class="arrows">
      </div> -->

      <div class="adressBox">
        <yd-cell-group class="ydddd">
          <yd-cell-item arrow>
            <span slot="left">地区</span>
            <input slot="right" type="text" @click.stop="show1 = true" v-model="address" readonly placeholder="请选择收货地址" style="color: #333;font-size: .373333rem;">
          </yd-cell-item>
        </yd-cell-group>

        <yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
      </div>

      <div class="infofill addr">
        <span class="particular">详细地址</span>
        <!-- <input type="text" class="street" placeholder="街道/楼号/门牌号" v-model="detailaddress"> -->
        <textarea class="ipt-addr" maxlength="50" placeholder="街道/楼号/门牌号" v-model="detailaddress"></textarea>
      </div>

    </div>

    <div class="ensure" @click="sumitlist">确认</div>
    <div class="popup" v-show="checkEmpty">请填写完整</div>
    <toast :type="type" v-show="load">{{msg}}</toast>
  </div>
</template>

<script>
import demo from "../result/demo";
import District from "ydui-district/dist/gov_province_city_area_id";
import toast from "../loading/loading";

export default {
  data() {
    return {
      show1: false,
      checkEmpty: false,
      address: "",
      district: District,
      id: "",
      pattern: new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
      ),
      phoneReg: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      phone: "",
      name: "",
      detailaddress: "",
      express_company: "",
      express_number: "",
      tophone: "",
      toadress: "",
      tocompany: "",
      msg: "提交中",
      type: "loading",
      load: false
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.tophone = this.$route.query.phone;
    this.toadress = this.$route.query.address;
    this.tocompany = this.$route.query.company;
    var cookie = document.cookie.split(";");
    var cookies = [];
    for (var i = 0; i < cookie.length; i++) {
      var temp = cookie[i].trim().split("=");
      cookies[temp[0]] = temp[1];
    }
    // console.log(cookies);
    var id = cookies["id"];
    // alert(id);
    if (!id) {
      this.id = id;
      window.location.href = "http://wztest.wofew.com/api/Main/login";
    }
  },
  mounted() {
    this.getUserInfo();
    //初始化textarea自动换行
    this.autoTextarea(document.getElementsByClassName("ipt-addr")[0], 0, 100);
  },
  components: {
    demo,
    toast
  },
  methods: {
    getUserInfo() {
      var data = {
        user_id: this.id
      };
      var that = this;
      $.ajax({
        type: "get",
        data: data,
        url: `${this.$store.state.globalIp}/api/Main/user_msg`,
        dataType: "json",
        success(result) {
          console.log(result);
          if (result.message == "成功") {
            that.name = result.data.name;
            that.phone = result.data.phone;
            that.address = result.data.address;
            that.detailaddress = result.data.detailaddress;
          }
        }
      });
    },
    result1(ret) {
      this.address = ret.itemName1 + "/" + ret.itemName2 + "/" + ret.itemName3;
    },
    getReceipt() {
      $.ajax({
        type: "get",
        data: {
          id: "",
          user_id: ""
        },
        url: `${this.$store.state.globalIp}/api/Main/a_sale_detail`,
        dataType: "json",
        success(result) {
          console.log(result);
        }
      });
    },
    autoTextarea: function(elem, extra, maxHeight) {
      extra = extra || 0;
      var isFirefox = !!document.getBoxObjectFor || "mozInnerScreenX" in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf("Opera"),
        addEvent = function(type, callback) {
          elem.addEventListener
            ? elem.addEventListener(type, callback, false)
            : elem.attachEvent("on" + type, callback);
        },
        getStyle = elem.currentStyle
          ? function(name) {
              var val = elem.currentStyle[name];

              if (name === "height" && val.search(/px/i) !== 1) {
                var rect = elem.getBoundingClientRect();
                return (
                  rect.bottom -
                  rect.top -
                  parseFloat(getStyle("paddingTop")) -
                  parseFloat(getStyle("paddingBottom")) +
                  "px"
                );
              }

              return val;
            }
          : function(name) {
              return getComputedStyle(elem, null)[name];
            },
        // minHeight = parseFloat(getStyle("height"));
        minHeight = 20;

      elem.style.resize = "none";

      var change = function() {
        var scrollTop,
          height,
          padding = 0,
          style = elem.style;

        if (elem._length === elem.value.length) return;
        elem._length = elem.value.length;

        if (!isFirefox && !isOpera) {
          padding =
            parseInt(getStyle("paddingTop")) +
            parseInt(getStyle("paddingBottom"));
        }
        scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop;

        elem.style.height = minHeight + "px";
        if (elem.scrollHeight > minHeight) {
          if (maxHeight && elem.scrollHeight > maxHeight) {
            height = maxHeight - padding;
            style.overflowY = "auto";
          } else {
            height = elem.scrollHeight - padding;
            style.overflowY = "hidden";
          }
          style.height = height + extra + "px";
          scrollTop += parseInt(style.height) - elem.currHeight;
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          elem.currHeight = parseInt(style.height);
        }
      };

      addEvent("propertychange", change);
      addEvent("input", change);
      addEvent("focus", change);
      change();
    },
    getAddress(data) {
      this.address = data;
    },
    sumitlist() {
      if (this.express_company.length < 1 || this.express_number.length < 1) {
        this.checkEmpty = true;
        setTimeout(() => {
          this.checkEmpty = false;
        }, 2000);
        return;
      }
      var that = this;
      this.load = true;
      $.ajax({
        type: "post",
        data: {
          id: this.$route.query.orderId,
          express_company: this.express_company,
          express_number: this.express_number,
          name: this.name,
          phone: this.phone,
          address: this.address,
          addressdetail: this.detailaddress
        },
        url: `${this.$store.state.globalIp}/api/Main/edit_express`,
        dataType: "json",
        success(result) {
          // that.$router.push({ path: "details", query: {orderId:that.$route.query.orderId,productId:that.$route.query.productId} });
          that.load = false;
          that.$router.go(-1);
        }
      });
    }
  }
};
</script>

<style>
div.affirm > div.addr {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
}
.addr .ipt-addr {
  flex: 1;
  min-height: 20px;
  max-height: 60px;
  border: none;
  resize: none;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.express {
  width: 351px;
  padding-bottom: 10px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px;
}
.infofill:not(.addr) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.infofill:not(.addr) > input {
  flex: 1;
}
.merchat {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 17px;
  padding-top: 24px;
  margin-left: 12px;
}
.line {
  width: 327px;
  height: 1px;
  background: rgba(238, 238, 238, 1);
  margin: 12px;
  margin-bottom: 0;
}
.company {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 93, 32, 1);
  line-height: 20px;
  padding: 0 12px;
}
.phone {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 93, 32, 1);
  line-height: 20px;
  margin-left: 24px;
}
.site {
  width: 327px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 93, 32, 1);
  line-height: 20px;
  margin-left: 12px;
}
.fillbtn {
  display: inline-block;
  width: 327px;
  height: 44px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  margin: 12px 12px 0px 12px;
}

.fillbtn,
.infofill {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fillbtn > input,
.infofill > input {
  width: auto !important;
  flex: 1;
}

.name,
.phone {
  display: inline-block;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  line-height: 20px;
  margin: 12px;
}
.oddnum {
  display: inline-block;
  font-size: 0.373333rem;
  font-family: PingFangSC-Regular;
  line-height: 0.533333rem;
  margin: 0.32rem;
}
.nameinp,
.num {
  width: 240px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  outline: none;
  border: 0;
}
.affirm {
  width: 351px;
  height: auto;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 6px 12px 0px 12px;
  padding-bottom: 10px;
}
.affirmP {
  display: inline-block;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin: 24px 0px 12px 12px;
}
.infofill {
  display: inline-block;
  width: 327px;
  height: 44px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  margin: 0px 12px 12px 12px;
}
.nameinfo,
.moblie,
.address {
  display: inline-block;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin: 12px;
}
.sureinfo,
.moblienum,
.selectaddress {
  width: 263px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  outline: none;
  border: 0;
}
.selectaddress {
  width: 243px;
  height: 20px;
}
.arrows {
  display: inline-block;
  width: 8px;
  height: 14px;
  margin-top: 12px;
}
.particular {
  display: inline-block;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin: 12px;
}
.street {
  display: inline-block;
  width: 222px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  outline: none;
  border: 0;
}
.ensure {
  width: 327px;
  height: 44px;
  background: rgba(0, 0, 0, 1);
  border-radius: 5px;
  font-size: 18px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 255, 255, 1);
  line-height: 44px;
  margin: 24px;
  text-align: center;
}
.place {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin: 12px;
}
.dizhi div {
  border: none;
  position: absolute;
  top: 0;
  left: 50px;
}
.inp {
  display: inline-block;
  width: 243px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  outline: none;
  border: 0;
}
.affirm > .adressBox {
  height: 44px;
  border-radius: 0.133333rem;
  margin: 0.32rem;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid #000;
}
.ydddd {
  width: 100%;
  height: 44px;
  font-size: 14px;
  border-radius: 5px;
}
.yd-cell:after {
  background-image: none;
}
.yd-cell-item input {
  padding-left: 23px;
}
.yd-cell-left > span {
  font-size: 14px;
}
.popup {
  width: 245px;
  height: 44px;
  background: rgba(40,40,40,.75);
  border-radius: 5px;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 255, 255, 1);
  line-height: 44px;
  text-align: center;
  /* margin: 0 auto; */
  position: fixed;
  left: 68px;
  top: 280px;
  z-index: 111;
}
</style>
